<template>
  <div>
    <div class="tab">
      <span class="title">支出</span>
      <el-button
        type="primary"
        @click="addNewData"
        :disabled="outDisabled || disabled"
      >
        新增
      </el-button>
      <el-button
        type="primary"
        @click="copyData"
        :disabled="outDisabled || disabled"
      >
        复制
      </el-button>
      <el-button
        type="primary"
        @click="deleteData"
        :disabled="outDisabled || disabled"
      >
        删除
      </el-button>
      <el-button
        type="primary"
        @click="upData"
        :disabled="outDisabled || disabled"
      >
        上移
      </el-button>
      <el-button
        type="primary"
        @click="downData"
        :disabled="outDisabled || disabled"
      >
        下移
      </el-button>
      <el-button
        type="primary"
        @click="turnToIn"
        :disabled="outDisabled || disabled"
      >
        转收入
      </el-button>
      <el-dropdown style="margin-left: 10px" @command="changeAuditDataStatus">
        <el-button type="primary" :disabled="inDisabled || disabled">
          费用模板 <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              :command="item.id"
              v-for="item in feeTempList"
              :key="item.id"
              >{{ item.freightTemplateName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button
        style="margin-left: 12px"
        @click="defaultData"
        :disabled="outDisabled || disabled"
      >
        还原
      </el-button>
      <el-checkbox
        v-model="data.costLock"
        :true-label="1"
        :false-label="0"
        :disabled="disabled"
        style="margin-left: 16px"
        @change="toOutLock($event)"
      >
        应付锁定
      </el-checkbox>
    </div>
    <div class="table">
      <el-table
        stripe
        border
        ref="table"
        height="100%"
        size="small"
        :data="data.docWorkFeeOutList"
        :cell-class-name="tableCellClassName"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="55" type="selection" fixed="left" />
        <el-table-column width="50" label="序号" prop="index">
          <template #default="scope">
            {{ Number(scope.row.index) + 1 }}
          </template>
        </el-table-column>
        <el-table-column width="150" label="结算对象编码">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-select
                v-model="scope.row.entCode"
                filterable
                remote
                reserve-keyword
                placeholder="请选择"
                ref="entCodeRef"
                size="small"
                :remote-method="selectEntOptions"
                :loading="entSelect.loading"
                style="width: 100%"
                :disabled="scope.row.checkStatus == 1"
                @click="selectEntOptions(scope.row.entFullname)"
              >
                <el-option
                  v-for="item in entSelect.options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  @click="getEntOption(item, scope.$index)"
                >
                  <span style="float: left">{{ item.leftName }}</span>
                  <span style="float: right">{{ item.rigthName }}</span>
                </el-option>
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.entCode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="150" label="结算对象名称">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.entFullname"
                ref="entFullnameRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.entFullname }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="对账单号">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.balanceDoccode"
                ref="balanceDoccodeRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.balanceDoccode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="150" label="费用名称">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <!--   @change="onChange(scope.row.index)" -->
              <el-select
                v-model="scope.row.feeName"
                filterable
                remote
                reserve-keyword
                placeholder="请选择"
                ref="feeNameRef"
                size="small"
                :remote-method="selectFeeNameOptions"
                :loading="feeNameSelect.loading"
                style="width: 100%"
                :disabled="scope.row.checkStatus == 1"
                @click="selectFeeNameOptions('')"
              >
                <el-option
                  v-for="item in feeNameSelect.options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  @click="getFeeNameOption(item, scope.$index)"
                />
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.feeName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="150" label="币种">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-select
                v-model="scope.row.currency"
                filterable
                remote
                reserve-keyword
                placeholder="请选择"
                ref="currencyRef"
                size="small"
                :remote-method="selectCurrencyOptions"
                :loading="currencySelect.loading"
                style="width: 100%"
                :disabled="scope.row.checkStatus == 1"
                @click="selectCurrencyOptions('')"
              >
                <el-option
                  v-for="item in currencySelect.options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  @click="getCurrencyOption(item, scope.$index)"
                >
                  {{ item.showLabel }}
                </el-option>
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.currency }}
            </span>
          </template>
        </el-table-column>
        <!-- 当前的计费单位只是用于显示，并未其他效果 -->
        <el-table-column width="150" label="计费单位">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-select
                v-model="scope.row.unit"
                filterable
                remote
                reserve-keyword
                placeholder="请选择"
                ref="unitRef"
                size="small"
                :remote-method="selectUnitOptions"
                :loading="unitSelect.loading"
                style="width: 100%"
                :disabled="scope.row.checkStatus == 1"
              >
                <el-option
                  v-for="item in unitSelect.options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.unit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="汇率">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.exchangeRate"
                ref="exchangeRateRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.exchangeRate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="数量">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.digit"
                ref="digitRef"
                size="small"
                @change="calcMoneyByDigit($event, scope.$index)"
                @input="scope.row.digit = validateNumber(scope.row.digit)"
                :disabled="scope.row.checkStatus == 1"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.digit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="单价">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.price"
                ref="priceRef"
                size="small"
                @change="calcMoneyByPrice($event, scope.$index)"
                @input="
                  scope.row.price = validateOnlyNumberTwo(scope.row.price)
                "
                :disabled="scope.row.checkStatus == 1"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.price }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="金额">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.totalmoney"
                ref="totalmoneyRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.totalmoney }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="折人民币">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.natMoney"
                ref="natMoneyRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.natMoney }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="已销金额">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.verificationMoney"
                ref="verificationMoneyRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.verificationMoney }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="未销金额">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.getUnVerificationMoney"
                ref="noAmountMoneyRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.getUnVerificationMoney }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="备注">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.feeMemo"
                ref="feeMemoRef"
                size="small"
                :disabled="scope.row.checkStatus == 1"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.feeMemo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="发票编号">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.invoiceCode"
                ref="invoiceCodeRef"
                size="small"
                :disabled="scope.row.checkStatus == 1"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.invoiceCode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="150" label="开票日期">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-date-picker
                v-model="scope.row.invoiceDate"
                type="date"
                ref="invoiceDateRef"
                size="small"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="scope.row.checkStatus == 1"
              />
            </div>
            <span v-else>
              {{ scope.row.invoiceDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="审核">
          <template #default="scope">
            <el-checkbox
              v-model="scope.row.checkStatus"
              ref="checkStatusRef"
              size="small"
              disabled
              :true-label="1"
              :false-label="0"
            />
          </template>
        </el-table-column>
        <el-table-column width="100" label="审核人">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.checkName"
                ref="checkNameRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.checkName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="审核日期">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.checkTime"
                ref="checkTimeRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.checkTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="录入人">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.createBy"
                ref="createByRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.createBy }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="录入日期">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-input
                v-model="scope.row.createTime"
                ref="createTimeRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.createTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="级别">
          <template #default="scope">
            <div
              v-if="
                scope.row.index === rowIndex &&
                scope.column.index === columnIndex
              "
            >
              <el-select
                v-model="scope.row.feeLevel"
                ref="feeLevelRef"
                size="small"
                :disabled="scope.row.checkStatus == 1"
              >
                <el-option :value="1" />
                <el-option :value="2" />
                <el-option :value="3" />
                <el-option :value="4" />
                <el-option :value="5" />
                <el-option :value="6" />
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.feeLevel }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, toRaw } from 'vue'
import { ElMessageBox } from 'element-plus'
import { validateOnlyNumberTwo, validateNumber } from '@/utils/validate.js'
export default defineComponent({
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {}
    },
    outDisabled: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:detailData'],
  computed: {
    data: {
      get() {
        return this.detailData
      },
      set(value) {
        this.$emit('update:detailData', value)
      }
    },
    dataCopy() {
      return this.dataCopyFeeOut()
    }
  },
  data() {
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引

      entSelect: {
        loading: false,
        options: []
      },
      feeNameSelect: {
        loading: false,
        options: []
      },
      currencySelect: {
        loading: false,
        options: []
      },
      unitSelect: {
        loading: false,
        options: []
      },
      // dataCopy: [],
      tableSelect: [],
      feeTempList: []
    }
  },
  inject: ['dataCopyFeeOut'],
  methods: {
    validateOnlyNumberTwo,
    validateNumber,
    defaultData() {
      ElMessageBox.confirm('正在编辑的数据将还原，是否确定执行？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.data.docWorkFeeOutList = JSON.parse(JSON.stringify(this.dataCopy))
      })
    },
    // onChange(index) {
    //     this.data.docWorkFeeOutList[index].currency = 'RMB'
    //     this.data.docWorkFeeOutList[index].exchangeRate = 1
    // },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex
      row.index = rowIndex
    },
    //单元格被点击时会触发该事件
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index
      this.columnIndex = column.index
      // this.$nextTick(() => {
      //   if (column.label == "结算对象编码") {
      //     this.$refs["entCodeRef"].focus();
      //   } else if (column.label == "结算对象名称") {
      //     this.$refs["entFullnameRef"].focus();
      //   } else if (column.label == "对账单号") {
      //     this.$refs["balanceDoccodeRef"].focus();
      //   } else if (column.label == "费用名称") {
      //     this.$refs["feeNameRef"].focus();
      //   } else if (column.label == "币种") {
      //     this.$refs["currencyRef"].focus();
      //   } else if (column.label == "汇率") {
      //     this.$refs["exchangeRateRef"].focus();
      //   } else if (column.label == "数量") {
      //     this.$refs["digitRef"].focus();
      //   } else if (column.label == "单价") {
      //     this.$refs["priceRef"].focus();
      //   } else if (column.label == "金额") {
      //     this.$refs["totalmoneyRef"].focus();
      //   } else if (column.label == "折人民币") {
      //     this.$refs["natMoneyRef"].focus();
      //   } else if (column.label == "已销金额") {
      //     this.$refs["verificationMoneyRef"].focus();
      //   } else if (column.label == "未销金额") {
      //     this.$refs["noAmountMoneyRef"].focus();
      //   } else if (column.label == "备注") {
      //     this.$refs["feeMemoRef"].focus();
      //   } else if (column.label == "发票编号") {
      //     this.$refs["invoiceCodeRef"].focus();
      //   }
      //   // else if (column.label == "开票日期") {
      //   //   this.$refs["invoiceDateRef"].focus();
      //   // }
      //   else if (column.label == "审核") {
      //     this.$refs["checkStatusRef"].focus();
      //   } else if (column.label == "审核人") {
      //     this.$refs["checkNameRef"].focus();
      //   } else if (column.label == "审核日期") {
      //     this.$refs["checkTimeRef"].focus();
      //   } else if (column.label == "录入人") {
      //     this.$refs["createByRef"].focus();
      //   } else if (column.label == "录入人") {
      //     this.$refs["createTimeRef"].focus();
      //   } else if (column.label == "级别") {
      //     this.$refs["feeLevelRef"].focus();
      //   }
      // });
    },
    //输入框失去焦点事件
    inputBlur(scope) {
      this.rowIndex = -1
      this.columnIndex = -1
    },
    /**
     * 选择后的数据
     */
    handleSelectionChange(val) {
      let arr = []
      for (let item of val) {
        let ret = toRaw(item)
        if (ret !== undefined) {
          arr.push(ret)
        }
      }
      this.tableSelect = arr
      console.log(this.tableSelect)
    },

    /**
     * 新增
     */
    addNewData() {
      this.data.docWorkFeeOutList.push({
        entCode: null,
        entFullname: null,
        balanceDoccode: null,
        feeName: null,
        currency: null,
        exchangeRate: null,
        digit: 1,
        price: null,
        totalmoney: 0,
        natMoney: 0,
        verificationMoney: 0,
        // noAmountMoney: 0,
        getUnVerificationMoney: 0, // 未销金额
        feeMemo: null,
        invoiceCode: null,
        invoiceDate: null,
        checkStatus: 0,
        checkName: null,
        checkTime: null,
        feeLevel: 1,
        seqId: 1, //序号
        entId: null, // 结算对象ID
        isIncome: 1, // 收支类型0 支出 1收入
        feeCode: null, // 费用代码
        docId: this.$route.query.id, // 业务_ID
        balanceId: null // 对账单ID
      })
    },
    /**
     * 复制
     */
    copyData() {
      if (this.tableSelect.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      this.tableSelect.forEach((t) => {
        this.data.docWorkFeeOutList.push(JSON.parse(JSON.stringify(t)))
      })
    },
    /**
     * 删除
     */
    deleteData() {
      if (this.tableSelect.length > 0) {
        for (let i = this.tableSelect.length - 1; i >= 0; i--) {
          let deleteIndex = this.data.docWorkFeeOutList.findIndex(
            (t) => t == this.tableSelect[i]
          )
          if (deleteIndex > -1) {
            this.data.docWorkFeeOutList.splice(deleteIndex, 1)
          }
        }
      } else {
        this.$message.warning('请选择数据')
      }
    },
    /**
     * 上移
     */
    upData() {
      if (this.tableSelect.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      let insertRow = this.tableSelect[0]
      for (let i = this.tableSelect.length - 1; i >= 0; i--) {
        let moveIndex = this.data.docWorkFeeOutList.findIndex(
          (t) => t == insertRow
        )
        if (moveIndex > -1) {
          this.data.docWorkFeeOutList.splice(moveIndex, 1)
          this.data.docWorkFeeOutList.splice(
            moveIndex - 1 >= 0 ? moveIndex - 1 : 0,
            0,
            insertRow
          )
          break
        }
      }
      this.tableSelect = []
      this.$refs.table.clearSelection()
    },
    /**
     * 下移
     */
    downData() {
      if (this.tableSelect.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      let insertRow = this.tableSelect[this.tableSelect.length - 1]
      for (let i = 0; i <= this.data.docWorkFeeOutList.length; i++) {
        let moveIndex = this.data.docWorkFeeOutList.findIndex(
          (t) => t == insertRow
        )
        if (moveIndex > -1) {
          this.data.docWorkFeeOutList.splice(moveIndex, 1)
          this.data.docWorkFeeOutList.splice(
            moveIndex + 1 <= this.data.docWorkFeeOutList.length
              ? moveIndex + 1
              : this.data.docWorkFeeOutList.length,
            0,
            insertRow
          )
          break
        }
      }
      this.tableSelect = []
      this.$refs.table.clearSelection()
    },
    toOutLock(e) {
      this.data.version++
      this.data.docWorkFeeOutList.forEach((t) => {
        t.seqId = t.index + 1
      })
      this.$http.post('/api/docwork/paylock', this.data).then((res) => {
        if (res.status) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
     * 查询结算对象编码数据
     * @param {string} query - 输入内容查询
     * "/api/busDictDetail/queryall", {
          PageIndex: 1,
          PageSize: 50,
        }
       // id: t.id,
      // label: t.fullname,
      // value: t.customerNumber,
      // selectLabel: `${t.customerNumber}-${t.fullname}`,
     */
    selectEntOptions(query) {
      this.entSelect.loading = true
      this.$http
        .get('/api/buenterprise/dropdownlist', {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: query
        })
        .then((res) => {
          this.entSelect.options = res.map((item) => {
            return {
              id: item.id,
              value: item.entCode,
              label: item.entCode,
              selectLabel: `${item.entCode}|${item.entName}`,
              name: item.entName,
              leftName: item.entCode,
              rigthName: item.entFullname
            }
          })
        })
        .finally(() => (this.entSelect.loading = false))
    },
    /**
     * 结算对象编码的option
     * @param {object} item - 选择的option
     */
    getEntOption(item, index) {
      this.data.docWorkFeeOutList[index].entFullname = item.rigthName
      this.data.docWorkFeeOutList[index].entId = item.id
    },
    /**
     * 查询费用名称数据
     * @param {string} query - 输入内容查询
     */
    selectFeeNameOptions(query) {
      this.feeNameSelect.loading = true
      this.$http
        .get('/api/base/feetype/query', {
          PageIndex: 1,
          PageSize: 10,
          KeyWords: query
        })
        .then((res) => {
          this.feeNameSelect.options = res.content.map((t) => {
            return {
              id: t.id,
              label: t.feeName,
              value: t.feeName,
              currency: t.currency.split('|')[0],
              code: t.feeCode
            }
          })
        })
        .finally(() => (this.feeNameSelect.loading = false))
    },
    /**
     * 费用选择的option
     * @param {object} item - 选择的option
     */
    getFeeNameOption(item, index) {
      this.data.docWorkFeeOutList[index].feeCode = item.code
      this.data.docWorkFeeOutList[index].currency = item.currency
      this.getExchangeRate(item.currency, index)
    },
    /**
     * 查询币种数据
     * @param {string} query - 输入内容查询
     */
    selectCurrencyOptions(query) {
      this.currencySelect.loading = true
      this.$http
        .get('/api/base/currency/dropdownlist', {
          // PageIndex: 1,
          // PageSize: 10,
          KeyWords: query
        })
        .then((res) => {
          this.currencySelect.options = res.map((t) => {
            return {
              id: t.id,
              label: t.currencyCode,
              value: t.currencyCode,
              showLabel: `${t.currencyCode}|${t.currencyName}`
            }
          })
        })
        .finally(() => (this.currencySelect.loading = false))
    },
    /**
     * 币种的option
     * @param {object} item - 选择的option
     */
    getCurrencyOption(item, index) {
      this.getExchangeRate(item.value, index)
    },
    getExchangeRate(name, index) {
      this.$http
        .get('/api/base/exchangerate/query', {
          Currency: name,
          IsIncome: 0,
          PageIndex: 1,
          PageSize: 10
        })
        .then((res) => {
          if (res.totalElements == 0) {
            this.$message.warning('暂无符合的汇率')
            this.data.docWorkFeeOutList[index].exchangeRate = 0
          } else {
            this.data.docWorkFeeOutList[index].exchangeRate =
              res.content[0].exchangeRate
          }
          if (this.data.docWorkFeeOutList[index].totalmoney) {
            this.data.docWorkFeeOutList[index].natMoney =
              this.data.docWorkFeeOutList[index].totalmoney *
              this.data.docWorkFeeOutList[index].exchangeRate
            // this.data.docWorkFeeOutList[index].getUnVerificationMoney =
            //   this.data.docWorkFeeOutList[index].natMoney;
          }
        })
    },
    /**
     * 查询计费单位
     */
    selectUnitOptions() {
      this.unitSelect.loading = true
      this.$http
        .get('/api/dictDetail/query', {
          PageIndex: 1,
          PageSize: 10,
          DictName: 'sys_unit'
        })
        .then((res) => {
          this.unitSelect.options = res.content.map((t) => {
            return {
              id: t.id,
              label: t.label,
              value: t.value
            }
          })
        })
        .finally(() => (this.unitSelect.loading = false))
    },
    calcMoneyByDigit(e, index) {
      this.data.docWorkFeeOutList[index].totalmoney =
        e * this.data.docWorkFeeOutList[index].price
      this.data.docWorkFeeOutList[index].getUnVerificationMoney =
        this.data.docWorkFeeOutList[index].totalmoney
      if (this.data.docWorkFeeOutList[index].exchangeRate) {
        this.data.docWorkFeeOutList[index].natMoney =
          this.data.docWorkFeeOutList[index].totalmoney *
          this.data.docWorkFeeOutList[index].exchangeRate
        // this.data.docWorkFeeOutList[index].getUnVerificationMoney =
        //   this.data.docWorkFeeOutList[index].natMoney;
      }
    },
    calcMoneyByPrice(e, index) {
      this.data.docWorkFeeOutList[index].totalmoney =
        e * this.data.docWorkFeeOutList[index].digit
      this.data.docWorkFeeOutList[index].getUnVerificationMoney =
        this.data.docWorkFeeOutList[index].totalmoney
      if (this.data.docWorkFeeOutList[index].exchangeRate) {
        this.data.docWorkFeeOutList[index].natMoney =
          this.data.docWorkFeeOutList[index].totalmoney *
          this.data.docWorkFeeOutList[index].exchangeRate
        // this.data.docWorkFeeOutList[index].getUnVerificationMoney =
        //   this.data.docWorkFeeOutList[index].natMoney;
      }
    },
    async turnToIn() {
      if (this.tableSelect.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      // 用于转收入时，没有结算对象时，添加当前数据基本信息上的委托单位
      let res = []
      if (this.detailData.custId) {
        res = await this.$http.get('/api/buenterprise/dropdownlist', {
          PageIndex: 1,
          PageSize: 50,
          id: this.detailData.custId
        })
      }
      this.tableSelect.forEach((t) => {
        let tCopy = JSON.parse(JSON.stringify(t))
        if (!tCopy.entCode) {
          if (Array.isArray(res.content) && res.content.length > 0) {
            tCopy.entFullname = res.content[0].entName
            tCopy.entId = res.content[0].id
            tCopy.entCode = res.content[0].entCode
          }
        }
        this.data.docWorkFeeInList.push(tCopy)
      })
    },
    // 获取费用模板列表
    getFeeList() {
      var _this = this
      _this.$http
        .get('/api/frighttemplate/QueryList')
        .then((res) => {
          _this.feeTempList = res
        })
        .catch((err) => {
          _this.$message.error('费用模板数据请求失败')
        })
    },
    changeAuditDataStatus(val) {
      var _this = this
      _this.$http
        .get('/api/freightdetail/QueryList', {
          FreightTemplateId: val
        })
        .then((res) => {
          res.forEach(async (item) => {
            if (item.isincome == 0) {
              var rate = 0
              let RateRes = await this.$http.get(
                '/api/base/exchangerate/query',
                {
                  Currency: item.currencycode,
                  IsIncome: 1,
                  PageIndex: 1,
                  PageSize: 10
                }
              )
              if (RateRes.totalElements == 0) {
                _this.$message.warning('暂无符合的汇率')
                rate = 0
              } else {
                rate = RateRes.content[0].exchangeRate
              }
              _this.data.docWorkFeeOutList.push({
                entCode: null,
                entFullname: null,
                balanceDoccode: null,
                feeName: item.feename,
                currency: item.currencycode,
                exchangeRate: rate,
                digit: 1,
                price: item.price,
                totalmoney: item.price * 1,
                natMoney: rate == 0 ? 0 : item.price * 1 * rate,
                verificationMoney: 0,
                getUnVerificationMoney: item.price * 1, //未销金额
                feeMemo: null,
                invoiceCode: null,
                invoiceDate: null,
                checkStatus: 0,
                checkName: null,
                checkTime: null,
                feeLevel: 1,
                seqId: 1, //序号
                entId: null, // 结算对象ID
                isIncome: 0, // 收支类型0 支出 1收入
                feeCode: item.feecode, // 费用代码
                docId: this.$route.query.id, // 业务_ID
                balanceId: null // 对账单ID
              })
            }
          })
        })
        .catch((err) => {
          _this.$message.error('费用模板详情请求失败')
        })
    }
  },
  mounted() {
    // this.dataCopy = this.detailData.docWorkFeeOutList;
    this.getFeeList()
  }
})
</script>

<style lang="scss" scoped>
.tab {
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  .title {
    border-left: 4px solid #2867c9;
    padding: 0 20px;
  }
}

.table {
  padding: 0 16px;
  height: calc(100% - 50px);

  :deep(.el-table) {
    .el-table__header th {
      background-color: #f7f8fa;
    }

    .cell {
      height: 28px;
      line-height: 28px;
    }

    .el-checkbox {
      height: 28px;
    }
  }
  :deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
    background-color: #409eff;
  }
  :deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after) {
    border-color: #ffffff;
  }
}
</style>
